<template>
  <div>
    <el-popover placement="top" title="提示："  v-model="visible" trigger="manual">
      <p><i class="el-icon-warning" style="color:#E6A23C"></i>  点击此处可以切换平台</p>
      <div style="text-align: right; margin: 0">
        <el-button type="primary" size="mini" @click="confirmPlatformTips">我已知晓</el-button>
      </div>
      <el-dropdown slot="reference" trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <el-tag type="info">{{ platformName }}</el-tag>
          <i class="el-icon-caret-bottom" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="item in platformArr"
            :key="item.val"
            :command="item.val"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </el-popover>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      visible: false,
    };
  },
  computed: {
    ...mapGetters(["platform", "platformAuth","platformTips"]),
    platformName() {
      return this.switchPlatformName(this.platform);
    },
    platformArr() {
      let _this = this;
      let o = this.platformAuth
        .split(",")
        .sort((a, b) => a - b)
        .map((p) => {
          return {
            name: _this.switchPlatformName(p),
            val: p,
          };
        });
      return o;
    },
  },
  mounted() {
    this.$nextTick(() => {
        if(this.platformTips){
            this.visible = true;
        }
    });
  },
  methods: {
    handleCommand(command) {
      this.$store.dispatch("app/togglePlatform", command);
      //this.$router.go(0) 在手机端无效
      window.location.reload();
    },
    switchPlatformName(val) {
      let str = "";
      switch (val) {
        case "0":
          str = "安卓";
          break;
        case "1":
          str = "ios";
          break;
        case "2":
          str = "小游戏";
          break;
      }
      return str;
    },
    confirmPlatformTips(){
        this.visible = false
        this.$store.dispatch("app/setPlatformTips",this.visible)
    }
  },
};
</script>

<style>
.el-dropdown-link {
  cursor: pointer;
  color: #5a5e66;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}
</style>
